<template>
  <div class="chat-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>{{ friend.name }}</span> <!-- 确保 friend 是一个有效的对象 -->
      </div>
      <el-scrollbar height="500px">
        <div v-for="message in messages" :key="message.id" class="message">
          <div v-if="message.type === 'received'" class="received">
            <el-avatar :size="30" :src="friend.avatar" />
            <div class="bubble">{{ message.content }}</div>
          </div>
          <div v-else class="sent">
            <div class="bubble">{{ message.content }}</div>
            <el-avatar :size="30" :src="userAvatar" />
          </div>
        </div>
      </el-scrollbar>
      <div class="input-container">
        <el-input
          v-model="newMessage"
          placeholder="请输入消息"
          @keyup.enter="sendMessage"
        ></el-input>
        <el-button type="primary" @click="sendMessage">发送</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userAvatar: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.xJ6pG6DffJn4fGvkymqPEwHaE8?rs=1&pid=ImgDetMain', // 使用有效的图片链接
      messages: [
        { id: 1, content: '你好！', type: 'received' },
        { id: 2, content: '你好，我是张三', type: 'sent' },
      ],
      newMessage: '',
      friend: {}, 
    };
  },
  methods: {
    sendMessage() {
      if (this.newMessage.trim()) {
        this.messages.push({
          id: Date.now(),
          content: this.newMessage,
          type: 'sent',
        });
        this.newMessage = '';
      }
    },
  },
  mounted() {
    // 获取路由参数中的 id
    const friendId = this.$route.query.id; // 或 this.$route.params.id，取决于你的路由配置
    if (friendId) {
      // 假设有一个全局的好友列表
      const friends = [
        {
          id: 1,
          name: '张三',
          avatar: 'https://img.touxiangkong.com/uploads/allimg/2023030412/vp2d0oq0kcw.jpg',
          lastMessage: '你好，最近怎么样？',
        },
        {
          id: 2,
          name: '李四',
          avatar: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.FpIIdDXmxIIYgmV57fzPTgHaFj?rs=1&pid=ImgDetMain',
          lastMessage: '今天天气不错！',
        },
        {
          id: 3,
          name: '王五',
          avatar: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.xJ6pG6DffJn4fGvkymqPEwHaE8?rs=1&pid=ImgDetMain',
          lastMessage: '有空一起吃饭吗？',
        },
      ];

      // 根据 id 查找好友信息
      this.friend = friends.find(friend => friend.id == friendId) || {};
    }
  },
};
</script>

<style scoped>
.chat-container {
  display: flex;
  justify-content: center;
  padding: 20px;
}
.box-card {
  width: 100%; 
}
.message {
  display: flex;
  margin: 10px 0;
}
.received {/* 接收的消息在左边 */
   display: flex;
   float: left;
}
.sent { /* 发送的消息在右边 */
  position: absolute;
  display: flex;
  right: 5px;
}
.bubble {
  background-color: #f0f0f0;
  padding: 5px 10px;
  border-radius: 10px;
  margin: 0 10px;
  max-width: 60%; 
  word-wrap: break-word; /* 自动换行 */
}
.sent .bubble {
  background-color: #a2d9ce;
}
.input-container {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
.el-input {
  flex: 1;
  margin-right: 10px;
}
.el-button {
  width: 60px;
}
</style>